<template>
  <div class="app-container">
    <el-row>
      <el-col :span="22"
        ><div class="grid-content bg-purple">
          <el-form :model="pages" label-width="100px" inline>
            <el-form-item label="关键字：">
              <el-input
                v-model="pages.keyword"
                placeholder="根据文章标题搜索"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态：">
              <el-select v-model="pages.state" placeholder="请选择">
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
                <!-- <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option> -->
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="" @click="clearForm">清除</el-button>
              <el-button type="primary" @click="serch">搜索</el-button>
            </el-form-item>
          </el-form>
        </div></el-col
      >
      <el-col :span="2"
        ><div class="grid-content bg-purple-light">
          <el-button type="success" @click="addDialog = true">
            <i class="el-icon-edit"></i> 新增技巧</el-button
          >
        </div></el-col
      >
    </el-row>

    <el-alert
      :title="'数据一共' + total + '条'"
      type="info"
      :closable="false"
      show-icon
    ></el-alert>
    <!-- 表格 -->
    <el-table :data="list" style="width: 100%" v-loading="loading">
      <el-table-column prop="date" label="序号" width="80" type="index">
      </el-table-column>
      <el-table-column prop="title" label="文章标题" width="400">
        <template slot-scope="scope">
          {{ scope.row.title }}
          <i
            class="el-icon-film"
            v-if="scope.row.videoURL"
            style="color: #0101fe"
            @click="icon(scope.row.videoURL)"
          ></i>
        </template>
      </el-table-column>
      <el-table-column prop="visits" label="阅读数" width="170">
      </el-table-column>
      <el-table-column prop="username" label="录入人"> </el-table-column>
      <el-table-column prop="createTime" label="录入时间"></el-table-column>
      <el-table-column prop="state" label="状态" width="100">
        <template #default="{ row }">
          {{ row.state ? '已禁用' : '已启用' }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="text" @click="preview(row)">预览</el-button>
          <el-button type="text" @click="change(row)">{{
            row.state === 0 ? '禁用' : '启用'
          }}</el-button>
          <el-button
            type="text"
            :disabled="!row.state"
            @click="showChangeDialog(row)"
            >修改</el-button
          >
          <el-button type="text" :disabled="!row.state" @click="del(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div style="height: 60px; margin-top: 10px">
      <el-pagination
        :current-page="pages.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pages.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="pagination"
      />
    </div>
    <!-- 新增标签 dialog -->
    <el-dialog
      title="新增文章"
      :visible.sync="addDialog"
      width="60%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="refForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input
            v-model="ruleForm.title"
            placeholder="请输入文章标题"
          ></el-input>
        </el-form-item>
        <!-- 富文本 -->
        <el-form-item label="文章内容" prop="articleBody" class="a">
          <quill-editor
            v-model="ruleForm.articleBody"
            @blur="$refs.refForm.validateField('articleBody')"
          >
          </quill-editor>
        </el-form-item>
        <el-form-item label="视频地址" prop="videoURL">
          <el-input v-model="ruleForm.videoURL"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改 dialog -->
    <el-dialog
      title="修改文章"
      :visible.sync="changeDialog"
      width="60%"
      :before-close="handleChangeClose"
    >
      <el-form
        :model="changeForm"
        :rules="rules"
        ref="refForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input
            v-model="changeForm.title"
            placeholder="请输入文章标题"
          ></el-input>
        </el-form-item>
        <!-- 富文本 -->
        <el-form-item label="文章内容" prop="articleBody" class="a">
          <quill-editor v-model="changeForm.articleBody"> </quill-editor>
        </el-form-item>
        <el-form-item label="视频地址" prop="videoURL">
          <el-input v-model="changeForm.videoURL"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleChangeClose">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 预览 -->
    <articlesPreview ref="children1"></articlesPreview>
    <!-- 视频 -->
    <el-dialog
      title="视频"
      v-if="videoDialog"
      :visible.sync="videoDialog"
      :before-close="videoDialogClose"
      width="800"
      height="500"
    >
      <span> 地址：{{ this.videoURL }}</span>
      <video
        :src="videoURL"
        width="100%"
        height="100%"
        controls
        autoplay
      ></video>
    </el-dialog>
  </div>
</template>

<script>
import { list, remove, add, changeState, update } from '@/api/hmmm/articles'
import articlesPreview from '../components/articles-preview.vue'
import { status } from '@/api/hmmm/constants'
import dayjs from 'dayjs'
export default {
  components: {
    articlesPreview
  },
  data () {
    return {
      ruleForm: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      // 修改的form
      changeForm: {},
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      },
      list: [],
      newList: [],
      videoDialog: false,
      videoURL: '',
      status: status,
      addDialog: false,
      // 修改
      changeDialog: false,
      total: 0,
      pages: {
        page: 1,
        pagesize: 10,
        keyword: '',
        state: null
      },
      inputString: '',
      loading: false
    }
  },
  created () {
    this.getList()
  },

  methods: {
    // 获取列表
    async getList () {
      this.loading = true
      const { data } = await list(this.pages)
      // console.log(data)
      this.list = data.items
      this.total = data.counts
      // console.log(this.list)
      this.dayjs()
      this.loading = false
    },
    // 搜索
    async serch () {
      if (!this.pages.keyword) {
        // 输入框没值
        this.pages.page = 1
        this.inputString = ''
      } else {
        // 输入框有值
        this.inputString = this.pages.keyword
      }
      this.getList()
    },
    // 清除表单
    clearForm () {
      this.pages.keyword = ''
      this.pages.state = null
      this.inputString = ''
      this.getList()
    },
    // 视频播放
    icon (url) {
      this.videoDialog = true
      this.videoURL = url
      // console.log(this.videoURL)
    },
    // 关闭视频
    videoDialogClose () {
      this.videoDialog = false
    },
    // 添加标签
    add () {
      this.$refs.refForm.validate(async (flag) => {
        if (!flag) return
        await add(this.ruleForm)
        this.handleClose()
        this.clearForm()
        this.pages.page = 1
        this.$message.success('添加成功')
      })
      //   await add(this.ruleForm)
      //   this.$message.success('添加成功')
      //   this.handleClose()
      //   this.getList()
      // }
    },
    // 关闭添加dialog
    handleClose () {
      this.addDialog = false
      this.$refs.refForm.resetFields()
      this.ruleForm = {
        title: '',
        articleBody: '',
        videoURL: ''
      }
    },
    // 关闭修改dialog
    handleChangeClose () {
      this.changeDialog = false
      this.$refs.refForm.resetFields()
      this.changeForm = {}
    },
    // 修改提交
    async submit () {
      this.$refs.refForm.validate(async (flag) => {
        if (!flag) return
        await update(this.changeForm)
        this.handleChangeClose()
        this.getList()
        this.$message.success('修改成功')
      })
      // await update(this.changeForm)
      // this.$message.success('修改成功')
      // this.handleChangeClose()
      // this.getList()
    },

    // 预览
    preview (row) {
      this.$refs.children1.row = row
      this.$refs.children1.showDialog()
      // console.log(row)
    },
    // 修改
    showChangeDialog (row) {
      this.changeForm = row
      this.changeDialog = true
    },
    // 启用禁用切换
    async change (row) {
      row.state = row.state ? 0 : 1
      await changeState({ id: row.id, state: row.state })
      this.$message.success('修改成功')
    },
    // 删除
    async del (row) {
      try {
        await this.$confirm('此操作将永久删除该文章, 是否继续?', '温馨提示', {
          type: 'warning'
        })
        await remove(row)
        this.$message.success('删除成功')
        if (this.list.length === 1 && this.pages.page > 1) {
          this.pages.page--
        }
        this.clearForm()
      } catch (err) {
        console.log(err)
      }
    },
    // 时间格式转换
    dayjs () {
      this.list.forEach((item) => {
        item.createTime = dayjs(item.createTime).format('YYYY-MM-DD hh:mm:ss')
      })
    },
    // 分页
    // 每页显示 条数改变时
    async handleSizeChange (newSize) {
      this.pages.pagesize = newSize
      this.pages.page = 1
      // if (this.pages.keyword) {
      // this.getList()
      const { data } = await list({
        page: this.pages.page,
        pagesize: this.pages.pagesize,
        keyword: this.inputString
      })
      this.list = data.items
      this.total = data.counts
      // console.log(this.list)
      this.dayjs()
      // console.log(data)
      // } else {
      // this.clearForm()
      // }
    },
    // 页码值改变时
    async handleCurrentChange (newPage) {
      this.pages.page = newPage
      // if (this.pages.keyword) {
      // this.getList()
      if (!this.inputString) {
        // 关键字不存在
        const { data } = await list({
          page: this.pages.page,
          pagesize: this.pages.pagesize
          // keyword: this.inputString
        })
        this.list = data.items
        this.total = data.counts
      } else {
        // 关键字存在
        const { data } = await list({
          page: this.pages.page,
          pagesize: this.pages.pagesize,
          keyword: this.inputString,
          state: this.pages.state
        })
        this.list = data.items
        this.total = data.counts
      }
      // this.list = data.items
      // this.total = data.counts
      // console.log(this.list)
      this.dayjs()
      // console.log(data)
      // } else {
      // this.clearForm()
      // }
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  background-color: #fff;
  margin: 10px;
  padding: 15px;
  .pagination {
    text-align: right;
    margin-top: 10px;
  }

  // .a {
  //   height: 330px;
  // }
  // .quill-editor {
  //   height: 200px;
  // }
  .pagination {
    float: right;
  }
}
::v-deep .ql-container {
  height: 200px;
}
</style>
